//跨层级传递数据

import { createContext, useContext } from "react";
// 1.使用 createContext 创建一个上下文对象
const MsgContext = createContext();
// 2.在顶层组件 通过Provider组件 提供数据

// 3.底层组件使用userContext 接收数据
const A = () => {
  return (
    <div>
      this is A
      <B />
    </div>
  );
};

const B = () => {
  const msg = useContext(MsgContext);
  return <div>this is B ,{msg} </div>;
};

function App() {
  const msg = "This is messgae";
  return (
    <div className="App">
      <h1>兄弟传值</h1>
      <MsgContext.Provider value={msg}>
        <A />
      </MsgContext.Provider>
    </div>
  );
}

export default App;
